<template>
    <div>
        <div>
            <el-card>
                <el-form class="userInfoForm" :rules="userInfoRules" v-model="userInfoForm" size="mini" label-width="100px">
                    <el-form-item label="头像" prop="photo">
                        <el-upload
                                class="avatar-uploader"
                                action="#"
                                :headers="headers"
                                :http-request="uploadPic"
                                :show-file-list="false"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="用户名">
                        <el-input v-model="userInfoForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="userInfoForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="userInfoForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="userInfoForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码">
                        <el-input type="password" ref="newPassword" :show-password="true" :clearable="true" v-model="userInfoForm.newPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input type="password" ref="okPassword" :show-password="true" :clearable="true" v-model="userInfoForm.okPassword"></el-input>
                    </el-form-item>

                    <div>
                        <el-button type="primary" size="small" @click="submit"><i class="el-icon-check"></i> 提交</el-button>
                        <el-button type="info" size="small"><i class="el-icon-delete"></i> 清空</el-button>
                    </div>
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script>
    import {Base64} from "js-base64";
    import {findUserById, updateUser} from "../../api/admin/permissions/user";
    import {getToken} from "../../utils/auth";
    import {previewFile, uploadFace} from "../../api/admin/system/file";


    export default {
        name: "userInfo",
        data(){
                const validateConfirmPassword = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.userInfoForm.okPassword) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            }
            const validatePassword = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('密码不能为空！'));
                } else {
                    callback()
                }
            }
            return{
                imageUrl: '',
                photo:'',
                userInfoForm:{
                    username:'',
                    name:'',
                    phone:'',
                    email:'',
                    userFace:'',
                    newPassword:'',
                    okPassword:'',

                },
                fileUploadUrl:'',
                headers:'',
                faceName:'',
                userInfoRules:{
                    newPassword: [{ required: true, trigger: 'blur', validator: validatePassword }],
                    okPassword: [{ required: true, trigger: 'blur', validator: validateConfirmPassword }]
                }

            }
        },
        created() {
            let userInfo = localStorage.getItem("userInfo")
            let info = JSON.parse(Base64.decode(userInfo));
            findUserById(info.userId).then(res=>{
                this.userInfoForm=res.data.data;
                this.imageUrl = res.data.data.userFace;
            })
            const settings = require('../../config/settings');
            this.headers = {'Authorization':getToken()}
            this.fileUploadUrl = settings.env == 'prod' ? settings.baseUrl.production : settings.baseUrl.development + "/admin/demo-file/uploadFace";
        },
        methods: {
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                this.userInfoForm.photo = file;
                return isJPG && isLt2M;
            },
            uploadPic(){
                let that=this
               if (this.userInfoForm.photo!=null){
                   let oFReader = new FileReader()
                   oFReader.readAsDataURL(this.userInfoForm.photo)
                   oFReader.onloadend = function(oFRevent) {
                       that.imageUrl=oFRevent.target.result
                   }
               }
            },
            submit(){
                var param = new FormData();
                param.append("file",this.userInfoForm.photo)
                uploadFace(param).then(res=>{
                    previewFile(res.data.data).then(res1=>{
                        this.userInfoForm.userFace=res1.data.data
                        updateUser(this.userInfoForm).then(res2=>{
                            if (res2.data.code == '200') {
                                this.$message.success('修改用户成功')
                                // findUserById(info.userId).then(res=>{
                                //     this.userInfoForm=res2.data.data;
                                // })
                            } else {
                                this.$message.success('修改用户失败')
                            }
                        })
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
